
<template>
  <div  class="main-div">
    <Row>
      <Col span="24">
        <Card  dis-hover class="task-card">
          <div class="app-container">
            <el-row type="flex" justify="start" style="margin-left: -14px">
              <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width='80px' inline  size='mini'>
                <el-form-item label="流程名称">
                  <el-input v-model="queryForm.procDefName" clearable></el-input>
                </el-form-item>
                <el-form-item label="实例标题">
                  <el-input v-model="queryForm.subject"  clearable></el-input>
                </el-form-item>


                <el-form-item label="创建时间">
                  <DatePicker  format="yyyy-MM-dd" v-model="queryForm.tmpCreateTime"  @on-change="queryFormCreateTime"   type="date"></DatePicker>
                </el-form-item>
                <el-form-item label="结束时间">
                  <DatePicker  format="yyyy-MM-dd" v-model="queryForm.tmpEndTime" @on-change="queryFormEndTime"   type="date"></DatePicker>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                >
                  <el-table-column
                    label="序号"
                    fixed
                    type="index"
                    width="50"
                    fixed
                    align="center">
                    <template slot-scope="scope">
                      <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="procDefName"
                    label="流程名称"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="startUserNo"
                    label="发起人"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="subject"
                    label="实例标题"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="title"
                    label="流程标题"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="forbidden"
                    label="挂起状态"
                  >
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.forbidden" type="primary">是</el-tag>
                      <el-tag v-else type="error">否</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="接收时间"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="endTime"
                    label="结束时间"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="持续时间"
                    show-overflow-tooltip

                  >


                  </el-table-column>
                  <el-table-column
                    prop="statusDesc"
                    label="状态"
                   >
                    <template slot-scope="scope">
                    <el-tag v-if="scope.row.status=='completed'" type="info">结束</el-tag>
                    <el-tag v-else-if="scope.row.status=='running'" type="success">流转</el-tag>
                    <el-tag v-else-if="scope.row.status=='invalid'" type="danger">作废</el-tag>
                    <el-tag v-else-if="scope.row.status=='end'" type="warning">结束</el-tag>
                    <el-tag v-else type="error">-</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="statusDesc"
                    label="操作"
                   >
                    <template slot-scope="scope">
                      <el-button type="text" size="small"  @click="activateProcessInstance(scope.row.procId)">回放</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="prev, pager, next, sizes, total, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
    <Modal :mask-closable="false" v-model="modelerModal" fullscreen title="杰狮BPM流程回放" @on-cancel="cancelModel"
           :transfer="false">
      <iframe width="100%" height='100%' style="min-height: 650px" frameborder='0' align='center' allowfullscreen='true'
              allow="autoplay" id='iframe' :src="modelerSrc"></iframe>
      <div slot="footer"></div>
    </Modal>
  </div>


</template>

<script>
  import {getInstanceList,forbiddenInstance} from "@/api/analy";

  export default {
    name: 'Task',
    components:{
    },

    data() {
      return {
        modelerModal: false,
        modelerSrc: process.env.VUE_APP_BASE_BPM_API + "diagram/index.html",

        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        chartData: {},
        sellerId: 0,
        baseURL: process.env.VUE_APP_BASE_BPM_API,
        shopName: [],
        queryForm: {
          name: "",
          procDefName: "",
          subject: "",
          createTime: "",
          endTime: "",
          tmpCreateTime: "",
          tmpEndTime: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          whereSql: "",
          typeKey: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      cancelModel: function () {
        this.modelerModal = false;

      },
      activateProcessInstance:function(id){
        var url = this.baseURL;
       var    url = url + "revisit/viewer.html" + "?t=" + new Date().getTime()+"&processInstanceId="+id;
        this.modelerSrc = url
        this.modelerModal = true;
      },
      suspendProcessInstance:function(id){
        forbiddenInstance(id).then((response) => {
          if (response.code==0){
            this.$message({"duration":'800',message:'操作成功',type:'success',customClass:'zZindex'});
          }else{
            this.$message({"duration":'800',message:response.msg,type:'warning',customClass:'zZindex'});
          }
          this.getData();
        })
      },
      queryFormCreateTime:function(e){
        this.queryForm.tmpCreateTime=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.tmpEndTime=e;
      },
      queryMethod:function(){
       var name=  this.queryForm.name;
       var tmpCreateTime=  this.queryForm.tmpCreateTime;
       if (tmpCreateTime ){
         if (tmpCreateTime[0]){
           this.queryForm.createTime=this.queryForm.tmpCreateTime+" - "+this.queryForm.tmpEndTime;
         }
       }
        getInstanceList(this.queryForm).then((response) => {
          this.tableData = response.data

          this.total = parseInt(response.count);

        })

      },

      getData: function () {
        getInstanceList(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.page = 1
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.queryForm = "";
        this.queryForm.whereSql = "";
        this.queryForm.subject = "";
        this.queryForm.procDefName = "";
        this.queryForm.tmpCreateTime = "";
        this.queryForm.tmpEndTime = "";
        this.queryForm.createTime = "";
        this.queryForm.endTime = "";
        this.queryDate = [];
        this.queryForm.page = 1
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .main-div {
    background-color: #f3f3f3!important;
  }
.task-card{
  margin-top: 10px;
}.ivu-input-with-suffix {
   padding-right: 0px!important;
 }

</style>
